<template>
  <div class="record-item">
    <div class="record-header">
      <div class="record-type">{{ recordInfo.type }}</div>
      <div class="record-time">{{ recordInfo.date }}</div>
    </div>
    <div class="record-content">
      <div class="record-stats">
        <div class="stat-item">
          <div class="stat-value">{{ recordInfo.duration }}</div>
          <div class="stat-label">运动时长</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ recordInfo.distance }}km</div>
          <div class="stat-label">运动距离</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ recordInfo.calories }}cal</div>
          <div class="stat-label">消耗卡路里</div>
        </div>
      </div>
      <div class="record-map" v-if="recordInfo.mapImage">
        <img :src="recordInfo.mapImage" alt="运动轨迹" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps<{
  id: string
}>()

interface Record {
  id: string
  type: string
  date: string
  duration: string
  distance: number
  calories: number
  mapImage?: string
}

const recordInfo = ref<Record>({
  id: '1',
  type: '跑步',
  date: '2024-03-20 18:30',
  duration: '45:30',
  distance: 5.2,
  calories: 320,
  mapImage: '/demo-map-1.jpg'
})

onMounted(() => {
  // 实际项目中这里应该根据 props.id 获取数据
  console.log('加载运动记录:', props.id)
})
</script>

<style scoped lang="scss">
.record-item {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;

  .record-type {
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  .record-time {
    font-size: 14px;
    color: #999;
  }
}

.record-content {
  .record-stats {
    display: flex;
    justify-content: space-around;
    margin-bottom: 16px;

    .stat-item {
      text-align: center;

      .stat-value {
        font-size: 18px;
        font-weight: 500;
        color: #333;
      }

      .stat-label {
        font-size: 12px;
        color: #666;
        margin-top: 4px;
      }
    }
  }

  .record-map {
    width: 100%;
    height: 200px;
    border-radius: 8px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>
